<template>
  <div class="userMaIndex">
    <userHeader />
    <div class="breadClum">
      <span>
             <router-link :to="{path:'/pageIndex'}" ><a class="bread1">当前位置：首页  >  </a></router-link>
            <router-link :to="{path:'/catalog'}" > <a class="bread2">流程目录  ></a></router-link>
           <a class="bread2">穿行测试模板管理</a>
      </span>
    </div>
    <div class="navList">
      <router-link :to="{path:'/addTemplate',query:{is_add:0}}">
        <span class="sp1">添加模板</span>
      </router-link>
    </div>
    <el-table
      v-loading="loading"
      :data="mergeTemplateList"
      stripe
      ref="mergeTemplateTable"
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="70">
      </el-table-column>
      <el-table-column
        prop="merge_template_name"
        label="模板名称"
        width="430"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <!--<router-link :to="{path:'/addPosi',query:{role_id:scope.row.role_id,isManagement:true,user_id:scope.row.user_id,user_name:scope.row.user_name,real_roal:scope.row.role_name,real_name:scope.row.real_name,role_name:scope.row.role_id}}">-->
            <!--<span style="color: #4577bf;text-decoration: underline;">查看</span>-->
          <!--</router-link>-->
          <router-link :to="{path:'/addTemplate',query:{is_add:1,id:scope.row.merge_template_id}}">
            <span style="color: #4577bf;text-decoration: underline;margin-right:8px;">编辑</span>
          </router-link>
          <span @click.stop="deleteCurrentMergeTemplate(scope.row.merge_template_id)" style="cursor:pointer;color: #f2b914;text-decoration: underline;">删除</span>
        </template>
      </el-table-column>
      <el-table-column>

      </el-table-column>
    </el-table>
    <fixed />
    <el-pagination
      :page-count=pageSize
      layout="total,prev, pager, next, jumper"
      :current-page.sync="currentPage"
      @current-change="currentChange">
    </el-pagination>

  </div>
</template>

<script>
  import userHeader from '@/components/header.vue'
  import fixed from '@/components/fixed.vue'
  export default({
    components:{
      userHeader,
      fixed
    },
    data (){
      return {
        mergeTemplateList: [],
        page:1,
        limit:10,
        pageSize:1,
        total:0,
        currentPage:1,
        pageCount:0,
        loading:false
      }
    },
    computed:{

    },
    created(){
      this.getMergeTemplateList(this.limit,this.page).then(res=>{
        console.log(res)
        if(res.data.code==0){
          this.mergeTemplateList = res.data.data
        }else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    methods: {
      //获取穿行测试列表
      getMergeTemplateList(limit,page){
        return this.axios.get('/api/v1/flow/mergetemplate',{
          params:{
            limit:limit,
            page:page
          }
        })
      },
      deleteCurrentMergeTemplate(id){
        this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.axios.delete("/api/v1/flow/mergetemplate/"+id).then(res=>{
            if(res.data.code==0){
              this.$alert(res.data.message,"提示").then(()=>{
                this.getMergeTemplateList(this.limit,this.page).then(res=>{
                  if(res.data.code==0){
                    this.mergeTemplateList = res.data.data
                  }
                })
              })
            }
          })
        }).catch(()=>{
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })

      },
      //分页状态改变
      currentChange(val){
        this.page =val
      }
    }


  })
</script>
<style scoped="">
  .userMaIndex  >>> .navList>div{
    background: white;
  }
  .userMaIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  .userMaIndex .el-table  >>>  th.is-leaf{
    background: #d3e9bb;
    height:58px;

  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell{
    font-size: 14px;
    color: #5d9120;
    font-weight: normal;
  }
  .userMaIndex .el-table  >>> thead .el-checkbox{
    display: none;
  }
  .userMaIndex .el-table  >>> tr  th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .userMaIndex .el-table  >>> .el-table__body-wrapper{
  }
  .userMaIndex .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row{
    height: 50px !important;
  }
  .userMaIndex .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td{
    height: 50px;
    /*border-bottom: 1px solid #aac983;*/
    border-right: 1px solid #aac983;
  }
  .userMaIndex .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td.belong-company .cell{
    padding-left: 6px;
    padding-right: 0;
  }
  .userMaIndex .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
  .userMaIndex  .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row .cell{
    text-align: center;
  }
  .userMaIndex .el-table .el-dropdown >>>  span{
    font-size: 14px;
  }
  .userMaIndex  .el-table  >>>  .el-table__header .has-gutter th{
    text-align: center;
  }
  .userMaIndex .el-table >>>  span.e-ditor{
    margin-right:12px ;
    color: #4577bf;
    text-decoration: underline;
  }
  .userMaIndex .el-table >>>  span.d-elete{
    color: #4577bf;
    text-decoration: underline;
    margin-right: 12px;
  }
  .userMaIndex  .e-table-footer{
    background: #d3e9bb;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .userMaIndex  .e-table-footer  .e-selectAll{
    width: 71px;
    text-align: center;
    border-left: 1px solid #aac983;
    border-right: 1px solid #aac983;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
  }
  .userMaIndex .e-table-footer .e-selectText{
    display: inline-block;
    margin-left: 20px;
    color: #5d9120;
  }
  .userMaIndex .e-selectText .e-del{
    font-size: 16px;
    color: #fff;
    padding: 6px 20px;
    background: #f56c6c;
    border-radius:2px ;
    -webkit-border-radius: 2px;
    margin-left: 30px;

  }

  .userMaIndex  .input-with-select{
    display: inline-block;
    width: 260px;
    height: 28px;
    margin-left: 32px;

  }
  .userMaIndex .input-with-select >>> .el-input-group__append{
    display: inline-block;
    width: 40px;
    height: 100%;
    line-height: 28px;
    margin-left: 6px;
    border: none !important;
  }
  .userMaIndex .input-with-select >>> .el-input__inner{
    display: inline-block;
    width: 170px;
    height: 100%;

  }
  .userMaIndex  .input-with-select  >>> .el-input-group__append{
    position: relative;
  }
  .userMaIndex  .input-with-select  >>> .el-input-group__append .el-button{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background: #f2b914;
    margin: 0;
    padding: 0;
    border:none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
  }

  .userMaIndex .input-with-select  >>> .el-input-group__append .el-button span{
    margin-top: 0;
    background:#f0b914 ;
    padding: 0;
    position: relative;
    color: white;
    margin-left: -10px;
  }
  .userMaIndex .input-with-select  >>> .el-input-group__append .el-button span:before{
    position: absolute;
    content: '';
    right:-20px;
    top:50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-image: url("../../static/images/search.png");
    background-repeat:no-repeat ;
    background-position: center;
  }
  .userMaIndex >>> .navList a span {
    display: inline-block;
    padding: 6px 20px;
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 14px;
    color: white;
    margin-right: 7px;
    margin-top: 10px;
  }
  .userMaIndex  .navList{
    padding-bottom: 10px;
    border-bottom: none;
  }

  .userMaIndex>>>  .el-form-item__error{
    display: inline-block;
    left: 390px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .userMaIndex>>>  .e-tree-1{
    margin-bottom: 20px;
  }
  .userMaIndex>>>  .e-tree-1  .el-form-item__error{
    display: inline-block;
    left: 0px;
    top:100%;
  }
  .userMaIndex >>> .el-dialog{
    /*width: 560px;*/
  }
  .userMaIndex >>> .el-dialog .el-dialog__body{
    /*text-align: center;*/
  }

  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-select{
    width: 100%;
  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-select .el-input--suffix .el-input__inner{
    padding: 0;
    text-align: center;
    border: none;
    background-color: #d3e9bb;
    height: auto;
    line-height: 1;
    color: #5d9120;
  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-input{

  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-input .el-input__suffix{
    display: inline-block;
    width:17px;
    height: 15px;
    background: #afd682;
    top:50%;
    margin-top: -7px;
  }

  .userMaIndex .el-table  >>> thead  .cell  .el-select .el-input .el-select__caret{
    color: white;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
  }
  .userMaIndex .el-table  >>> thead  .cell .el-select .el-input .el-select__caret.is-reverse{
    transform: none;
    -webkit-transform: none;
    top:0;
    margin-top: -12px;
  }
  .userMaIndex >>>.el-table{
    margin-bottom: 0 !important;
  }

  .arrow{
    display: inline-block;
    width: 17px;
    height:15px;
    margin-left:4px;
    border-radius:4px;
    position: relative;
  }
  .arrow::after{
    content:'';
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:2px;
    background: #afd682 url("../../static/images/icon-down.png") no-repeat center;
  }
  @media screen and (max-width: 1400px) {
    .userMaIndex{
      padding: 6px;
    }
  }
  /*.el-table >>> .el-table_1_column_6 .*/
</style>
<style>


</style>
